<template>
  <el-container>
    <el-header>
      <span>表单模块</span>
    </el-header>
    <el-main>
     <div class="home-text">
       <span class="main">您是填写表单还是创建表单？</span>
       <el-row :gutter="10">
          <el-col :lg="12" :xs="24" class="col">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>如果创建表单请提供表单<em class="attention" style="margin-left: 5px;">名称</em> ：</span>
              </div>
              <el-input v-model="formName" :style="{ width: inputWidth }"  placeholder="请输入标题"></el-input>
              <el-button class="submit-btn" type="primary" @click="createForm">创建</el-button>
            </el-card>
          </el-col>
          <el-col :lg="12" :xs="24" class="col">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>如果填写表单请填写表单 <em class="attention">邀请码</em> ：</span>
              </div>
              <el-input v-model="formId" :style="{ width: inputWidth }"  placeholder="请输入邀请码"></el-input>
              <el-button class="submit-btn" type="success" @click="inputForm">填写</el-button>
            </el-card>
          </el-col>
       </el-row>
     </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      formName: "",//表单名称
      formId: "",//表单id
      windowWidth: window.innerWidth,//窗口宽度
    };
  },
  methods: {
    //创建表单
    createForm: function () {
      this.$notify({
        title: '成功',
        message: '跳转到创建表单页面',
        type: 'success'
      });
      this.$router.push({
        path: "/approver",
        query: {
          formName: this.formName
        }
      });
      this.formName = ""
      console.log("创建表单");
    },
    //填写表单
    inputForm() {
      this.$notify({
        title: '成功',
        message: '跳转到填写表单页面',
        type: 'success'
      });
      this.$router.push({
        path: "/jsxPreview",
        query: {
          formId: this.formId
        }
      });
      this.formId = ""
      console.log("填写表单");
    },
    //获取
    handleResize() {
      this.windowWidth = window.innerWidth
    },
  },
  computed: {
    inputWidth() {
      return this.windowWidth < 768 ? "200px" : "250px";
    },
  },
  created() {
    window.addEventListener('resize', this.handleResize)
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize)
  },
}
</script>

<style scoped>
.el-header {
  background-color: #3296fa;
  color: white;
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-color: rgba(0, 0, 0, 0.1);
  color: #333;
  height: calc(100vh - 60px);
}

.home-text{
  width: 100%;
  height: 100px;
  font-family: "home-text";
  display: flex;
  flex-direction: column;

}
.home-text .main{
  font-size: 36px;
}
.home-text .tip{
  margin-top: 10px;
  display: flex;
  align-items: center;
  font-size: 24px;
}
.home-text .tip>span.tip-create{
  margin-right: 32px;
}
.home-text .tip>span.tip-input{
  margin-right: 10px;
}
.submit-btn{
  margin-left: 5px;
}
.attention{
  color: red;
  font-style: normal;
}

.box-card{
  font-size: 20px;
}
/*每个盒子高度*/
.col{
  margin-top: 10px;
}
</style>